<script setup lang="ts">
import { ElSelect } from 'element-plus'

defineProps<{
  options: any[]
}>()
const emits = defineEmits<{
  (e: 'change', v: any): void
}>()
const model = defineModel<string | null>({ required: true })
const selectRef = ref<InstanceType<typeof ElSelect> | null>(null)

function clickInput() {
  const elem = selectRef.value?.$el
  elem?.click()
}
function handleChange(val: any) {
  model.value = val
  emits('change', val)
}
function onChange() {
  emits('change', model.value)
}
</script>

<template>
  <div class="relative">
    <ElSelect ref="selectRef" class="opacity-0" @change="handleChange">
      <ElOption
        v-for="item in options"
        :key="item"
        :label="item"
        :value="item"
      />
    </ElSelect>
    <ElInput
      v-model.trim="model" class="free inset-0 !absolute" v-bind="$attrs"
      clearable
      @click="clickInput" @change="onChange"
    />
  </div>
</template>
